@extends('backend.layouts.app')

@section('styles')
<link rel="stylesheet" href="{{asset('/backend/js/ztree/css/metroStyle/metroStyle.css')}}">
@endsection

@section('content')
<div class="layui-row layui-col-space12">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header layui-card-header-auto">院校等级</div>
            <div class="layui-card-body">
                <ul class="ztree" id="collegeLevel"></ul>
            </div>
        </div>
    </div>
    <div class="layui-col-md9 layui-form">
        <div class="layui-card">
            <div class="layui-card-header layui-card-header-auto" id="collegeName">院校等级</div>
            <div class="layui-card-body" style='text-align: center;'>
                <table id="dataTable" lay-filter="dataTable" style="margin:0 auto;text-align: left;'">
                </table>
                <div style="margin-top:20px">
                    <button type="button" class="layui-btn" lay-demotransferactive="saveData">提交</button>
                    <button type="button" class="layui-btn" lay-demotransferactive="reload">重置</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript" src="{{asset('/backend/js/ztree/js/jquery.ztree.all.js')}}"></script>
<script type="text/javascript">
    let current_level = null;
    layui.use(['layer', 'transfer', 'util'], function () {
        let transfer = layui.transfer;
        let util = layui.util;
        let current_data;
        let treeSettings = {
            view: {
                showIcon: false,
                showLine: false,
            },
            data: {
                key: {
                    title: 'title',
                    name: 'title',
                }
            },
            callback: {
                onClick: function (event, treeId, tree) {
                    current_level = tree.id;
                    layer.load(2);
                    $.ajax({
                        url: "{{route('admin.base.college.getCollegeByLevel')}}",
                        data: {
                            'level': current_level,
                        },
                        success: function (data) {
                            current_data = data;
                            transfer.render({
                                elem: '#dataTable',
                                data: data.colleges,
                                title: ['院校名称', '已选择的院校'],
                                width: 290,
                                height: 500,
                                id: 'college',
                                showSearch: true,
                                value: data.selected
                            });
                            layer.closeAll('loading');
                        }
                    });
                    $("#collegeName").html('院校等级 -- ' + tree.title + "");
                }
            }
        };
        $.ajax({
            url: "{{route('admin.base.dataitem.detail.tree')}}",
            data: {
                itemcode: 'college_grade'
            },
            success: function (data) {
                $.fn.zTree.init($("#collegeLevel"), treeSettings, data);
            }
        });
        util.event('lay-demoTransferActive', {
            saveData: function (othis) {
                let selected = [];
                transfer.getData('college').forEach(function ($item) {
                    selected.push($item.value);
                });
                $.ajax({
                    url: "{{route('admin.base.college.saveCollegeLevel')}}",
                    data: {
                        level: current_level,
                        data: selected,
                        _token: "{{csrf_token()}}"
                    },
                    type: 'post',
                    success: function (data) {
                        layer.msg('保存成功');
                    }
                })
            },
            reload: function () {
                transfer.reload('college', {
                    value: current_data.selected
                });
            }
        });
    });

</script>
@endsection
